<template>
  <div class="base-dialog">
    <el-dialog
      v-model="getShow"
      :destroy-on-close="props.destroyOnClose"
      :width="typeof width === 'number' ? `${width}%` : width"
      :show-close="false"
      :close-on-click-modal="false"
      :before-close="handlerCancer"
    >
      <template #header>
        <slot name="header" v-if="!showHeader"></slot>
        <div class="dialog-header" v-if="showHeader">
          <div class="dh-left">
            <h4 class="dh-tilte">{{ props.title }}</h4>
            <slot name="tilte"></slot>
          </div>
          <img
            @click="handlerCancer"
            src="@/assets/image/delete.png"
            alt="删除"
          />
        </div>
      </template>
      <slot></slot>
      <template #footer>
        <slot name="foot" v-if="!showFooter"></slot>
        <span class="dialog-footer" v-if="showFooter">
          <span class="cancel" @click="handlerCancer">取消</span>
          <span class="preservation" @click="handlerSubmitAll">确定</span>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { biMessage } from "@/utils/use-message";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  isShow: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    //是否需要展示底部的确认区域
    type: Boolean,
    required: false,
    default: () => true,
  },
  showHeader: {
    //是否自定义头部
    type: Boolean,
    required: false,
    default: () => true,
  },
  width: {
    type: [String, Number],
    required: false,
    default: 35,
  },
  handlerSubmit: {
    type: [Function, Promise], //提交的方法
    required: false,
  },
  destroyOnClose: {
    type: Boolean,
    required: false,
    default: () => false,
  },
});
const emits = defineEmits(["update:isShow", "onSubmit"]);

const handlerCancer = () => {
  biMessage("info", "已取消");
  emits("update:isShow", false);
};
const handlerSubmitAll = () => {
  // dialog 点击确定按钮之前处理相关业务逻辑
  emits("onSubmit");
  props?.handlerSubmit && props.handlerSubmit();
};
const getShow = computed({
  get: () => props.isShow,
  set: (val) => {
    emits("update:isShow", val);
  },
});
</script>
<style lang="scss">
@import "@/assets/styles/tools/mixins/mixin.scss";
.base-dialog {
  .dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .dh-left {
      display: flex;
      align-items: center;
    }
    .dh-tilte {
      font-size: 0.16rem;
      font-weight: 600;
      padding-right: 0.15rem;
    }
    .dh-rptype {
      @include buttomCss;
      height: 0.26rem;
      line-height: 0.26rem;
      padding: 0 0.1rem !important;
      margin: 0;
      background: #e8f3ff;
      color: $color-active;
    }
    img {
      cursor: pointer;
    }
  }
  .dialog-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.1rem 0;
    .cancel {
      @include buttomGrey;
    }
    .preservation {
      @include buttomBule;
    }
  }
  .el-dialog {
    border-radius: 0.06rem;
  }
  .el-dialog__header {
    margin-right: 0;
  }
  .el-dialog__body {
    padding: 0.06rem 0.26rem;
  }
  .el-dialog__footer {
    padding-bottom: 0.1rem;
  }
}
</style>
